<template>
  <div class="title">官方榜</div>
  <div class="container">
    <div class="flex-item" v-for="item in officialList" :key="item.id">
      <CoverMark class="w-36 flex-shrink-0" :pic-url="item.coverImgUrl" :playCount="item.playCount" />
      <div class="px-5 flex-1 flex-shrink-0 flex flex-col">
        <div class="text-xl font-bold">{{ item.name }}</div>
        <div class="text-xs text-main mt-2">
          <div v-for="(track, index) in item.tracks" class="mt-2">
            <div class="flex">
              <span class="mr-1">{{ index + 1 }}</span>
              <div class="flex-auto w-20 truncate">{{ track.first }} - {{ track.second }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="title pt-5">特色榜</div>
  <div class="grid grid-cols-5 2xl:grid-cols-10 gap-5">
    <div v-for="item in strictList" :key="item.id">
      <CoverMark class="w-36 flex-shrink-0" :pic-url="item.coverImgUrl" :playCount="item.playCount" />
      <div class="text-xs text-center mt-2">{{ item.name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import CoverMark from '@/components/cover-mark/coverMark.vue'
import { useMusicStore } from '@/stores/music'

const { getTopList, topList } = toRefs(useMusicStore())
getTopList.value()

const officialList = computed(() => topList.value.slice(0, 4))
const strictList = computed(() => topList.value.slice(4))
</script>

<style lang="less" scoped>
.title {
  @apply text-xl pb-5 font-bold;
}
.container {
  @apply grid grid-cols-2 grid-flow-row 2xl:grid-cols-4 gap-5;
}
.flex-item {
  @apply flex items-center bg-slate-200 rounded-lg cursor-pointer;
}
</style>
